<template>
  <div class="table-main">
    <el-table :data="tableData" border style="width: 100%" empty-text="暂无数据">
      <el-table-column prop="questionnaireName" label="问卷名称" align="center" />
      <el-table-column prop="xq" label="详情" align="center" width="130">
        <template #default="scope">
          <el-button type="primary" @click="showDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-content">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 100]"
          :small="small"
          background
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
  </div>

  <el-dialog v-model="dialogVisible" width="30%" :z-index="9">
    <div class="title">{{ title }}的问卷详情</div>
    <div class="vertical-table">
      <!-- 表头和数据行 -->
      <div v-for="(row, index) in detailtableData" :key="index" class="table-row">
        <!-- 表头单元格 -->
        <div class="header-cell">
          {{ row.questionContent }}
        </div>
        <!-- 数据单元格 -->
        <div class="data-cell">
          {{ row.replyContent }}
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from "vue";

  import { ElConfigProvider } from "element-plus";
  import zhCn from "element-plus/es/locale/lang/zh-cn";
  import axios from "axios";
  import { formatDate } from "@/utils/dateFormat";
  import { useRouter } from "vue-router";
  import { getServerUrl } from "@/utils/url";
  const serverUrl = getServerUrl();
  const router = useRouter();
  const dialogVisible = ref(false);
  const tableData = ref([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const formInline = reactive({
    questionnaireName: "",
    questionnaireType: "",
    replyStatus: "",
  });

  // 定义表格数据类型
  interface TableRow {
    detailId: string;
    questionContent: string;
    questionnaireId: string;
    questionnaireName: string;
    questionnaireType: string | null;
    replyContent: string;
    replyOrg: string;
    replyName: string;
    replyStatus: string | null;
    replyTime: string | null;
    detailUserOrgId: string;
    detailUserOrgName: string;
    detailUserOrgType: string;
  }

  // 模拟动态数据
  const detailtableData = ref<TableRow[]>([]);
  const small = ref(false);

  const onReset = () => {
    formInline.questionnaireName = "";
    formInline.questionnaireType = "";
    formInline.replyStatus = "";
    currentPage.value = 1;
    initData();
  };
  const title = ref("");
  const showDetail = (row: any) => {
    title.value = row.questionnaireName;
    detailtableData.value = row.questions;
    dialogVisible.value = true;
  };

  const handleSizeChange = (val: number) => {
    pageSize.value = val;
    initData();
  };
  const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    initData();
  };

  const downloadFile = (value: any) => {};
  const initData = async () => {
    try {
      const response = await axios.get(serverUrl + "external/questionnaire/list", {
        params: {
          pageNum: currentPage.value,
          pageSize: pageSize.value,
        },
      });
      tableData.value = response.data.data.list;
      total.value = response.data.data.total;
    } catch (error) {
      console.error("数据加载失败:", error);
    }
  };

  onMounted(() => {
    initData();
  });
  // 意见反馈
  const feedback = (value: any) => {
    router.push({ name: "standardQueryFeedback", params: { id: 123 } }); // 使用路由名称进行导航
  };
</script>
<style lang="scss" scoped>
.vertical-table {
  width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 600;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.table-row:last-child {
  border-bottom: none;
}

.header-cell {
  width: 220px;
  padding: 12px;
  background-color: #f5f7fa;
  font-weight: bold;
  border-right: 1px solid #ebeef5;
}

.data-cell {
  flex: 1;
  padding: 12px;
}

.query-content {
  display: flex;
  justify-content: space-between;
}

.query-btn {
  min-width: 175px;
}

.pagination-content {
  margin-top: 1.43rem;
  display: flex;
  justify-content: center;
}

.icon-w {
  margin-left: 20px;
}

::v-deep .el-table__empty-text {
  color: #666;
  /* 文本颜色 */
  font-size: 16px;
  /* 文本大小 */
  margin: 40px 0;
  /* 上下间距，避免过于紧凑 */
}
</style>
